<template>
  <div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="newTree" icon="el-icon-plus" v-if="_SHOWBTN(showBetCode1)">新建</el-button>
    <el-dialog title="新建用户" :visible.sync="dialogFormVisible" width="805px" @close="close">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--  登录名：：-->
        <el-form-item label="登录名：" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入用户名" style="magin-left:-30px"></el-input>
        </el-form-item>
        <!-- 用户名称：-->
        <el-form-item label=" 用户名称：" prop="name">
          <el-input v-model="ruleForm.userName" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <!-- 所属部门/岗位：-->
        <el-form-item label=" 所属部门/岗位：">
          <el-select v-model="mineStatus" placeholder="请选择" multiple collapse-tags>
            <el-option :value="mineStatus" style="height: auto">
              <el-tree
                :data="treedata"
                show-checkbox
                check-strictly
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                @check-change="handleCheckChange"
              ></el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 所属部门角色：-->
        <el-form-item label=" 所属角色：">
          <template slot-scope="scope">
            <el-select
              v-model="ruleForm.value1"
              multiple
              placeholder="请选择"
              @change="change($event)"
            >
              <el-option v-for="item in Data" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </template>
        </el-form-item>
        <!-- 登录密码：-->
        <el-form-item label="登录密码：" prop="name">
          <el-input v-model="ruleForm.password" placeholder="请输入登录密码"></el-input>
        </el-form-item>
        <!-- 确认密码：-->
        <el-form-item label="确认密码：" prop="name">
          <el-input v-model="ruleForm.surePassword" placeholder="请输入确认密码"></el-input>
        </el-form-item>
        <!--状态：-->
        <el-form-item label=" 状态：">
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 用户电话：-->
        <el-form-item label="用户电话：" prop="name">
          <el-input v-model="ruleForm.mobile" placeholder="请输入用户电话"></el-input>
        </el-form-item>
        <!-- 电子邮件：-->
        <el-form-item label="电子邮件：" prop="name">
          <el-input v-model="ruleForm.email" placeholder="请输入电子邮件"></el-input>
        </el-form-item>
        <!--本地图片选择-->
        <div class="pic-box">
          <h1 class="h1-1">上传图片：</h1>
          <Upload :ruleForm.sync="ruleForm" ref="upload"></Upload>
        </div>
      </el-form>

      <!--结束-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  props: ["get","showBetCode1"],
  components: {
    Upload,
  },
  data() {
    return {
      //文本框
      // 上级部门

      mineStatus: "",
      treedata: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      id: [],
      type: [],
      //  角色列表

      Data: [],
      // 下拉集合
      id1: [],
      textarea: "",

      dialogFormVisible: false,
      // 状态
      options: [
        { value: "1", name: "启用" },
        { value: "2", name: "停用" },
      ],
      ruleForm: {
        // 登录名
        name: "",
        // 密码
        password: "",
        // 用户名称
        userName: "",

        //  角色列表
        value1: [],

        // 确认密码
        surePassword: "",
        //状态
        region: "",
        //用户电话
        mobile: "",
        //电子邮件
        email: "",
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        region: [
          { required: true, message: "请选择组织类型", trigger: "change" },
        ],
      },
    };
  },
  created() {},
  methods: {
    // 岗位
    newTree() {
      this.dialogFormVisible = true;
      this.Api.treeUser().then((res) => {
        this.treedata = res.data;
      });
    },
    change(event) {
      event.forEach((res) => {
        this.id1.push({ id: res });
      });
    },
    handleCheckChange(data, checked, node) {
      let res = this.$refs.tree.getCheckedNodes(false, true); //true，1. 是否只是叶子节点 2.选择的时候不包含父节点）
      if (checked) {
        this.$refs.tree.setCheckedNodes([data]);
      }
      this.id = data.id;
      this.type = data.type;
      let arrLabel = [];

      res.forEach((item) => {
        if (arrLabel.length === 0) {
          arrLabel.push(item.name);
        } else {
          arrLabel.length === 0;
        }
      });
      this.mineStatus = arrLabel;
      // 角色下拉
      this.Api.downUser({ id: this.id }).then((res) => {
        this.Data = res.data;
      });
    },
    close(){
     this.$refs["ruleForm"].clearValidate();
  this.dialogFormVisible = false;
  
    },
    // 提交
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.Api.newUser({
            loginName: this.ruleForm.name,
            realName: this.ruleForm.userName,
            password: this.$md5(this.ruleForm.password),
            status: this.ruleForm.region,
            phone: this.ruleForm.mobile,
            email: this.ruleForm.email,
            avatar: this.ruleForm.picUrl,
            postId: this.id,
            roleIds: this.id1,
          }).then((res) => {
            if (res.code == 0) {
               this.$refs.upload.$refs.uploadFile.clearFiles()
              this.$refs['ruleForm'].resetFields()
                 this.dialogFormVisible = false;
              this.$message.success('新建成功')
            
              this.ruleForm.name = "",
                this.ruleForm.userName = "",
                this.ruleForm.password = "",
                this.ruleForm.mobile = "",
                this.ruleForm.email = "",
                 this.ruleForm.region='',
                 this.ruleForm.picUrl='',
                 this.ruleForm.surePassword='',
                 this.ruleForm.value1='',
                
                this.get();
            
              
            }else{
              return this.$message.error(res.message)
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
  width: 80px;
  height: 36px;
  background: rgba(61, 127, 255, 1);
  border-radius: 3px;
  padding: 0;
  color: white;
  margin-right: 10px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  .el-dialog {
    .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
      }
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 0px 0 20px;
      .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
          margin: 0 0 16px 0;
          .el-form-item__label {
            width: 119px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
          }
          .el-form-item__content {
            margin-left: 120px !important;
            .el-input__inner {
              width: 260px;
              height: 36px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(221, 221, 221, 1);
              padding-left: 12px;
            }
          }
        }
        .pic-box {
          display: flex;
          padding-bottom: 10px;
          margin-left: 36px;
          .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
          }
        }
        .flex-box {
          display: flex;
          justify-content: flex-end;

          .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            h1 {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 22px;
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list__item {
  width: 88px;
  height: 88px;
  margin-right: 0px;
}
.upload-box {
  width: 88px;
  height: 88px;
  overflow: hidden;
  ul {
    li {
      div {
        > span {
          display: flex;
        }
      }
    }
  }
}
// 树形下拉
/deep/.ant-select-selection--multiple {
  min-height: 36px;
  padding-bottom: 3px;
  width: 260px;
  cursor: text;
  zoom: 1;
}
/deep/.ant-select-selection--single {
  position: relative;
  height: 32px;
  cursor: pointer;
  width: 260px;
}
</style>